<template>
  <el-container v-loading="loading">
    <el-main style="padding: 0">
      <el-row>
        <el-col :span="24">
          <el-col :span="16">
            <el-card style="padding: 15px">
              <!--题目信息-->
              <div>
                <i class="num">{{ curIndex + 1 }}</i>
                <span>{{ currentBankQuestion[curIndex].questionContent }}:</span>
              </div>

              <!--题目中的配图-->
              <img v-for="url in currentBankQuestion[curIndex].images" :src="url" title="点击查看大图" alt="题目图片"
                   style="width: 200px;height: 200px;cursor: pointer" @click="showBigImg(url)">

              <el-divider/>

              <!-- 参考答案：  -->
              <div class="referenceAnswer">参考答案</div>

              <div v-html="currentBankQuestion[curIndex].analysis" v-highlight class="referenceAnswerHtml"></div>

              <div style="margin-top: 25px">
                <el-button type="primary" :disabled="curIndex<1" @click="curIndex--">上一题</el-button>
                <el-button type="primary" :disabled="curIndex>=currentBankQuestion.length-1" @click="curIndex++">下一题
                </el-button>
                <el-button style="float: right" @click="showAnswerCard = !showAnswerCard">{{
                    showAnswerCard ? '隐藏答题卡' :
                      '显示答题卡'
                  }}
                </el-button>
              </div>

            </el-card>
          </el-col>
          <el-col :span="7" :offset="1">
            <!--题目导航-->
            <el-card>
              <div style="margin-top: 20px; max-height: 800px; overflow: auto;">
                <div style="font-size: 22px; font-weight: 600; margin-bottom: 10px">问题列表</div>
                <el-button
                  type="text"
                  style="margin-left: 15px; display: block"
                  v-for="(item, index) in currentBankQuestion" :key="item.questionId" @click="curIndex = index">
                  {{ index + 1 + "、" + item.questionContent }}
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-col>
      </el-row>

      <!--答题卡-->
      <el-row v-show="showAnswerCard">
        <el-card>
          <!--          <el-button style="margin-top: 10px;" :class="currentBankQuestion[item-1].questionType === 2 && !confirmMultiple.includes(item-1)?'' : userAnswer[item-1] !== undefined && (userAnswer[item-1]+'') === String(trueAnswer[item-1])
                    ? 'true': userAnswer[item-1] === undefined ? '' : 'wrong'"
                               v-for="item in currentBankQuestion.length" :key="item" @click="curIndex = item-1">{{ item }}
                    </el-button>-->
        </el-card>
      </el-row>

    </el-main>

    <!--图片回显-->
    <el-dialog :visible.sync="bigImgDialog" @close="bigImgDialog = false">
      <img style="width: 100%" :src="bigImgUrl">
    </el-dialog>
  </el-container>
</template>

<script>
  import questionBank from '@/api/questionBank'
  import question from '@/api/question'

  export default {
    name: 'TrainPage',
    data() {
      return {
        //当前题库id
        bankId: this.$route.params.bankId,
        //当前训练类型(1顺序,2随机)
        trainType: this.$route.params.trainType,
        createTag: this.$route.params.bankName,
        //当前题库的所有题目信息
        currentBankQuestion: [
          {
            questionType: ''
          }
        ],
        //当前题目的索引值
        curIndex: 0,
        //控制大图的对话框
        bigImgDialog: false,
        //当前要展示的大图的url
        bigImgUrl: '',
        //页面加载题库数据
        loading: true,
        //是否显示答题卡
        showAnswerCard: false,
      }
    },
    props: ['tagInfo'],
    created() {
      //一创建就改变头部的面包屑
      this.$emit('giveChildChangeBreakInfo', this.createTag, '在线考试')
      this.createTagsInParent()
      this.getQuestionInfo()
    },
    methods: {
      //向父组件中添加头部的tags标签
      createTagsInParent() {
        let flag = false
        this.tagInfo.map(item => {
          //如果tags全部符合
          if (item.name === this.createTag && item.url === this.$route.path) {
            flag = true
          } else if (item.name === this.createTag && item.url !== this.$route.path) {
            this.$emit('updateTagInfo', this.createTag, this.$route.path)
            flag = true
          }
        })
        if (!flag) this.$emit('giveChildAddTag', this.createTag, this.$route.path)
      },
      //获取题目顺序 并按照对应方式加载
      getQuestionInfo() {
        switch (parseInt(this.$route.params.trainType)) {
          case 1: {//顺序生成题目
            questionBank.getQuestionByBank({'bankId': this.bankId}).then((resp) => {
              if (resp.code === 200) {
                this.currentBankQuestion = resp.data
                this.loading = false
              }
            })
            break
          }
          case 2: {//随机练习
            questionBank.getQuestionByBank({'bankId': this.bankId}).then((resp) => {
              if (resp.code === 200) {
                //随机打乱题目
                let arr = resp.data
                for (let i = arr.length - 1; i >= 0; i--) {
                  let randomIndex = Math.floor(Math.random() * (i + 1))
                  let itemAtIndex = arr[randomIndex]
                  arr[randomIndex] = arr[i]
                  arr[i] = itemAtIndex
                }
                this.currentBankQuestion = arr
                this.loading = false
              }
            })
            break
          }
        }
      },
      //点击展示高清大图
      showBigImg(url) {
        this.bigImgUrl = url
        this.bigImgDialog = true
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/student/trainPage";
</style>
